본문으로 건너뛰기

useLayoutEffect와 useEffect의 차이점

React에서는 컴포넌트의 렌더링 후 특정 작업을 수행하기 위해 useEffect와 useLayoutEffect라는 두 가지 훅(Hook)을 제공합니다. 이 두 훅의 차이를 이해하고 적절하게 사용하는 것은 성능 최적화와 올바른 동작을 위해 매우 중요합니다.

useEffect와 useLayoutEffect란?​

  • useEffect: 이 훅은 컴포넌트가 렌더링된 이후에 비동기적으로 실행됩니다. 주로 데이터 가져오기, 구독 설정, DOM 업데이트와 같은 작업에 사용됩니다.
  • useLayoutEffect: 이 훅은 컴포넌트가 렌더링된 직후, 그리고 브라우저가 화면을 업데이트하기 전에 동기적으로 실행됩니다. 레이아웃을 측정하거나 DOM 변경이 필요한 경우에 사용됩니다.

두 훅의 차이점​

1. 실행 시점​

  • useEffect: 화면 업데이트 후 실행됩니다. 따라서 이 훅을 사용하면 브라우저가 사용자에게 변경사항을 먼저 보여주고 그 다음에 효과를 적용합니다.
  • useLayoutEffect: 화면 업데이트 전에 실행됩니다. 따라서 이 훅을 사용하면 DOM 업데이트가 블록되며, 그 후에 브라우저가 변경사항을 화면에 표시합니다.

2. 용도​

  • useEffect: 비동기 작업에 적합합니다. 예를 들어, 데이터를 가져오거나 타이머를 설정할 때 사용합니다.
  • useLayoutEffect: 동기 작업에 적합합니다. 예를 들어, 레이아웃을 측정하거나 화면에 보이기 전에 DOM을 직접 조작해야 할 때 사용합니다.

코드 예시​

다음은 useEffect와 useLayoutEffect의 차이를 보여주는 간단한 코드 예시입니다.

import React, { useEffect, useLayoutEffect, useRef } from 'react';

function LayoutEffectExample() {
  const divRef = useRef();

  useLayoutEffect(() => {
    console.log('useLayoutEffect');
    divRef.current.style.color = 'red';
  }, []);

  useEffect(() => {
    console.log('useEffect');
    divRef.current.style.color = 'blue';
  }, []);

  return <div ref={divRef}>Hello, World!</div>;
}

export default LayoutEffectExample;

이 예제에서는 useLayoutEffect가 먼저 실행되어 div 요소의 텍스트 색상을 빨간색으로 변경한 후, useEffect가 실행되어 텍스트 색상을 파란색으로 변경합니다. 결과적으로, 화면에 보이는 텍스트 색상은 파란색이 됩니다.

주의사항​

  • 성능 고려: useLayoutEffect는 렌더링을 블록하기 때문에 부적절하게 사용하면 성능 저하를 초래할 수 있습니다. 따라서 꼭 필요한 경우에만 사용해야 합니다.
  • 의존성 배열: 두 훅 모두 의존성 배열을 사용할 수 있습니다. 의존성 배열을 정확하게 지정하지 않으면 불필요한 렌더링이 발생할 수 있습니다.

더 알아보기​

내용 요약​

useEffect와 useLayoutEffect는 React에서 컴포넌트의 렌더링 후 특정 작업을 수행하기 위한 훅입니다. useEffect는 화면 업데이트 후 비동기적으로 실행되는 반면, useLayoutEffect는 화면 업데이트 전에 동기적으로 실행됩니다. 두 훅은 각각 비동기 작업과 동기 작업에 적합하며, 성능 최적화를 위해 적절하게 사용해야 합니다.